import React, { FC, useState } from 'react';
import {history} from 'umi'
import { Icon } from 'choerodon-ui'
import './styles/layout-frame.less'

export interface MenuData {
  key: string;
  path: string;
  title: string;
  icon?: string;
}

const renderMenu = (menuData: MenuData[]) => (
  <div className="block-layout-sider-menu-wrapper">
    {
      menuData.map((item) => (
        <div key={item.key} className="block-layout-sider-menu-item" onClick={() => history.push(item.path)}>
          {item.icon && <Icon style={{marginRight: 8}} type={item.icon} />}
          <span className="block-layout-sider-menu-item-text">
            {item.title}
          </span>
        </div>
      ))
    }
  </div>
);

const LayoutFrame: FC<{menuData: MenuData[]}> = ({ children, menuData }) => {
  const [collapse, setCollapse] = useState(false)
  return (
    <section className={`block-layout ${collapse ? 'block-layout-collapsed' : ''}`}>
      <section className="block-layout-sider">
        <header className="block-layout-sider-header" onClick={() => history.push('/')}>
          <img src={require('./logo').default} alt=""/>
          <span className="block-layout-sider-header-text">HZERO BLOCKS</span>
        </header>
        <main className="block-layout-sider-menu">
          {renderMenu(menuData)}
        </main>
      </section>
      <section className="block-layout-main">
        <header className="block-layout-main-header">
          <div className="block-layout-main-header-left">
            <Icon onClick={() => setCollapse(!collapse)} type="format_indent_decrease" />
          </div>
        </header>
        <main className="block-layout-main-content">
          {children}
        </main>
      </section>
    </section>
  )
}

export default LayoutFrame;